<!DOCTYPE html>
<html lang="zh-CN" xmlns="">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>昌航有物（校内二手交易平台）</title>
    <link rel="SHORTCUT ICON" href="{% static "image/favicon.ico" %}"/>
    <link rel="stylesheet" href={% static "css/Reset.css" %}>
    <link rel="stylesheet" href={% static "css/bootstrap.css" %}>
    <link rel="stylesheet" href={% static "css/bootstrap-theme.css" %}>
    <link rel="stylesheet" href={% static "css/Nchu-UTP.css" %}>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src={% static 'js/jquery.min.js' %}></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src={% static 'js/bootstrap.min.js' %}></script>
    <style>
        ul{
            text-align: center;
            max-width: 400px;
            margin: 0 auto;
        }
        .good-div{
            height: 200px;
            width: 360px;
            padding-top: 20px;
        }
        .good-img{
            border-top: 15px;
            border-bottom: 15px;
            width: 98px;
            height: 98px;
            float: left;
            background-color: white;
            overflow: hidden;
            border-radius: 10px;
        }
        .good-img img{
            width: 95.69px;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            transform: translateY(-50%);

        }
        .good-title{
            margin-top: 10px;
            text-align: left;
            padding-top: 20px;
        }
        .good-title-div{
            width: 360px;
        }
        .good-price-div{
            float: left;
            width: 360px;
        }
        .good-place{
            float: right;
            margin-right: 20px;
        }
        .search1{
            width: 96%;
            margin-top: 2%;
            margin-left: 1%;
        }
        .search-inside{
            width: 80%;
        }
        .btn1{
            float: right;
        }
        input::-ms-input-placeholder{
            text-align: center;
            font-size: 4%;
            font-family: "Libian SC", serif;
        }
        input::-webkit-input-placeholder {
            text-align: center;
            font-size: 4%;
            font-family: "Libian SC", serif
        }
        .Libian{
            font-family: "Libian SC", serif
        }
        .cover{
            background: #eaeaea;
        }
    </style>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src={% static "js/vue.js" %}></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script src="static/js/vue.min.js"></script>-->

<body>
<div class="navbar-fixed-top cover">
    <nav class="navbar navbar-default navbar-fixed-top search1 ">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand Libian font1" href="#">昌航有物</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <label class="search-inside">
                <input type="text" class="form-control" placeholder="搜索商品，千款好物等你来搜">
            </label>
            <button type="submit" class="btn btn-primary btn1 Libian">搜索</button>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle Libian" data-toggle="dropdown" role="button" aria-expanded="false">排序 <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">价格升序</a></li>
            <li><a href="#">价格降序</a></li>
            <li><a href="#">最新发布</a></li>
            <li class="divider"></li>
            <li><a href="#">综合</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <br><br><br>
</div>
<br><br>
<form>
<div id="card">
    <!--商品卡片-->
    <ul>
        <li class="container good-div" v-for="(Li) in List">
            <div class="good-img-div">
                <div class="good-img good-img1"><a v-bind:href="Li.id"><img v-bind:src="Li.pic1" class="" ></a></div>
                <div class="good-img good-img2"><a v-bind:href="Li.id"><img v-bind:src="Li.pic2" class="" ></a></div>
                <div class="good-img good-img3"><a v-bind:href="Li.id"><img v-bind:src="Li.pic3" class="" ></a></div>
            </div>
            <!--商品标题-->
            <a v-bind:href="Li.id">
                <div class="container good-title-div good-title">
                    <p>[[Li.title]]</p>
                </div>
            </a>

            <!--商品价格-->
            <div class="container good-price-div">
                <div class="price-icon">
                    <p>¥</p>
                </div>
                <div class="price-num">
                    <p>[[Li.price]]</p>
                </div>

                <!--商品发布地点-->
                <div class="good-position">
                    <p class="good-place">交易地点：[[Li.place]]</p>
                </div>

            </div>
        </li>
    </ul>

</div>


    <!--填补底部空白-->
    <div class="page-bottom"></div>

<!--底部导航栏-->

<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="navigation-div">
        <a href="{% url 'main:home' %}"><img alt="" class="navigation navi1" src={% static "image/nav-home.png" %}></a>
        <a href="{% url 'main:class' %}"><img alt="" class="navigation navi2" src={% static "image/nav-menu.png" %}></a>
        <a href="{% url 'main:cart' %}"><img alt="" class="navigation navi4" src={% static "image/nav-cart.png" %}></a>
        <a href="{% url 'main:mine' %}"><img alt="" class="navigation navi3" src={% static "image/nav-people.png" %}></a>
    </div>
</nav>
</form>
</body>
<script>
    var app = new Vue({
        el:"#card",
        delimiters:['[[',']]'],
        data: {
            List:null,
        },
        mounted:function () {
            var that = this;
            $.ajax({
                url:'{% url 'goods:addgoods' %}',
                type:'GET',
                data:{
                    'classify':'{{ classify }}',
                },
                dateType:'json'
            }).done(function (res) {
                that.List = res;
                if(res.status===0){
                    alert('暂无该类商品')
                }
            //    以此类推
            }).fail(function () {
                console.log("请求失败")
            })
        }
    })
</script>
</html>